<template>
  <template v-if="layout">
    <el-col v-if="showFactory" :span="span">
      <el-form-item :label="titles.factory" :prop="code.factory">
        <DeptSelect
          v-model="factory"
          v-model:name="factoryName"
          :disabled="disabledFactory"
          @change="factoryChange"
          key="factory"
          :placeholder="`请选择${titles.factory}`"
          :style="customerStyle"
          type="factory"
        ></DeptSelect>
      </el-form-item>
    </el-col>
    <el-col v-if="showWorkshop" :span="span">
      <el-form-item :label="titles.workshop" :prop="code.workshop">
        <DeptSelect
          v-model="workshop"
          v-model:name="workshopName"
          :disabled="disabledWorkshop"
          type="workshop"
          @change="workshopChange"
          key="workshop"
          :style="customerStyle"
          :parent="factory"
          :placeholder="`请选择${titles.workshop}`"
        ></DeptSelect>
      </el-form-item>
    </el-col>
    <el-col v-if="showLine" :span="span">
      <el-form-item :label="titles.line" :prop="code.line">
        <DeptSelect
          v-model="line"
          v-model:name="lineName"
          :disabled="disabledLine"
          type="line"
          key="productLine"
          @change="lineChange"
          :style="customerStyle"
          :parent="workshop"
          :placeholder="`请选择${titles.line}`"
        ></DeptSelect>
      </el-form-item>
    </el-col>
    <el-col v-if="showSection" :span="span">
      <el-form-item :label="titles.section" :prop="code.section">
        <DeptSelect
          v-model="section"
          v-model:name="sectionName"
          :disabled="disabledSection"
          type="section"
          key="prodSection"
          @change="sectionChange"
          :style="customerStyle"
          :parent="line"
          :placeholder="`请选择${titles.section}`"
        ></DeptSelect>
      </el-form-item>
    </el-col>
  </template>
  <template v-else>
    <el-form-item v-if="showFactory" :label="titles.factory" :prop="code.factory">
      <DeptSelect
        v-model="factory"
        v-model:name="factoryName"
        :disabled="disabledFactory"
        @change="factoryChange"
        key="factory"
        :placeholder="`请选择${titles.factory}`"
        :style="customerStyle"
        type="factory"
      ></DeptSelect>
    </el-form-item>
    <el-form-item v-if="showWorkshop" :label="titles.workshop" :prop="code.workshop">
      <DeptSelect
        v-model="workshop"
        v-model:name="workshopName"
        :disabled="disabledWorkshop"
        type="workshop"
        @change="workshopChange"
        :style="customerStyle"
        key="workshop"
        :parent="factory"
        :placeholder="`请选择${titles.workshop}`"
      ></DeptSelect>
    </el-form-item>

    <el-form-item v-if="showLine" :label="titles.line" :prop="code.line">
      <DeptSelect
        v-model="line"
        v-model:name="lineName"
        :disabled="disabledLine"
        type="line"
        key="productLine"
        :style="customerStyle"
        @change="lineChange"
        :parent="workshop"
        :placeholder="`请选择${titles.line}`"
      ></DeptSelect>
    </el-form-item>

    <el-form-item v-if="showSection" :label="titles.section" :prop="code.section">
      <DeptSelect
        v-model="section"
        v-model:name="sectionName"
        :disabled="disabledSection"
        type="section"
        key="prodSection"
        :style="customerStyle"
        @change="sectionChange"
        :parent="line"
        :placeholder="`请选择${titles.section}`"
      ></DeptSelect>
    </el-form-item>
  </template>
</template>

<script setup>
import { toRefs, computed } from "vue";
import { ElCol } from "element-plus";
const factory = defineModel("factory");
const workshop = defineModel("workshop");
const line = defineModel("line");
const section = defineModel("section");
const factoryName = defineModel("factoryName");
const workshopName = defineModel("workshopName");
const lineName = defineModel("lineName");
const sectionName = defineModel("sectionName");
const disabledList = defineModel("disabledList");
const emit = defineEmits(["factoryChange", "workshopChange", "lineChange", "sectionChange"]);
const props = defineProps({
  showFactory: {
    type: Boolean,
    default: true,
  },
  showWorkshop: {
    type: Boolean,
    default: true,
  },
  showLine: {
    type: Boolean,
    default: true,
  },
  showSection: {
    type: Boolean,
    default: true,
  },
  layout: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  span: {
    type: Number,
    default: 6,
  },
  itemStyle: {
    type: Object,
    default: () => {},
  },
  code: {
    type: Object,
    default: () => {
      return {
        factory: "factory",
        workshop: "workshop",
        line: "line",
        section: "section",
      };
    },
  },
  titles: {
    type: Object,
    default: () => {
      return { factory: "工厂", workshop: "工段", line: "产线", section: "工艺段" };
    },
  },
});
const {
  showFactory,
  showWorkshop,
  showLine,
  showSection,
  layout,
  span,
  itemStyle,
  code,
  disabled,
} = toRefs(props);
const customerStyle = computed(() => {
  return layout.value ? { width: "100%" } : itemStyle.value;
});
const disabledArr = computed(() => {
  return disabledList.value && Array.isArray(disabledList.value) ? disabledList.value : [];
});
const disabledFactory = computed(() => {
  return disabled.value || disabledArr.value.includes("factory");
});
const disabledWorkshop = computed(() => {
  return disabled.value || disabledArr.value.includes("workshop");
});
const disabledLine = computed(() => {
  return disabled.value || disabledArr.value.includes("line");
});
const disabledSection = computed(() => {
  return disabled.value || disabledArr.value.includes("section");
});

function factoryChange(val) {
  workshop.value = "";
  line.value = "";
  section.value = "";
  workshopName.value = "";
  lineName.value = "";
  sectionName.value = "";
  // factoryName.value = val.deptName;
  // factoryName.value = val.deptName;
  emit("factoryChange", { code: val, name: factoryName.value });
}

function workshopChange(val) {
  line.value = "";
  section.value = "";
  lineName.value = "";
  sectionName.value = "";
  // workshop.value = val.deptCode;
  // workshopName.value = val.deptName;
  emit("workshopChange", { code: val, name: workshopName.value });
}
function lineChange(val) {
  section.value = "";
  sectionName.value = "";
  // line.value = val.deptCode;
  // lineName.value = val.deptName;
  emit("lineChange", { code: val, name: lineName.value });
}
function sectionChange(val) {
  // section.value = val.deptCode;
  // sectionName.value = val.deptName;
  emit("sectionChange", { code: val, name: sectionName.value });
}
</script>

<style lang="scss" scoped></style>
